<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="margin: 20px;">
            <h2>会员注册</h2>
        </el-header>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
            <el-input type="text" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
            <el-input type="text" v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
            <el-input type="text" v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="doReg">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
    </el-container>
</div>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/jy.header.js"></script>
<script>
    Vue.component("jy-header",jyHeader);
    let vm= new Vue({
        el:"#app",
        data: function() {
            return {
                form: {
                    username: '',
                    password: '',
                    nickname: '',
                    mobile: ''
                }
            }
        },
        methods:{
            doReg(){
               console.log("form.value ",this.form);
                let url=`/register`
                axios.post(url,vm.form)
                    .then(function(resp){
                        console.log(resp);
                        alert(resp.data.message);
                    })
                    .catch(function(){
                        alert("login error");
                    })
            }
        }
    });
</script>
</body>
</html>